<template>
  <d2-container>
    <div class="pt-5">
      <el-form :model="form" label-width="100px" ref="form">
        <div style="width: 45%;">
          <el-form-item label="章节名称" prop="title">
            <el-input v-model="form.title" placeholder="章节名称"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="收费" prop="is_free">
            <el-switch v-model="form.is_free"></el-switch>
          </el-form-item>
        </div>
        <div style="width: 80%;height: 500px;">
          <el-form-item label="章节内容" prop="content">
            <d2-quill v-model="form.content" />
          </el-form-item>
        </div>
        <div class="row mt-9" style="width: 80%;">
          <el-form-item>
            <el-button type="primary" v-if="!updateStata"  @click="submitForm">保存并提交</el-button>
            <el-button type="primary" v-if="updateStata" @click="updateForm">修改并提交</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </d2-container>
</template>

<script>
  import {
    chapterCreateUrl,
    chapterUpdateUrl,
    chapterDetailUrl
  } from '@/utils/novel'
  import {
    baseURL
  } from '@/utils/request'
  import d2Quill from '@/components/d2-quill'
  export default {
    components: {
      d2Quill
    },
    data() {
      return {
        form: {
          title: '',
          is_free: false,
          content: '',
          novel: ''
        },
        getChapterId: '',
        updateStata: false,
      }
    },
    mounted() {
      if (this.$route.query.noveId) {
        this.form.novel = this.$route.query.noveId
        console.log('小说ID',this.form.novel);
      }
      if (this.$route.query.chapterId) {
        this.getChapterId = this.$route.query.chapterId;
        console.log('章节ID',this.getChapterId);
        this.updateStata = true
      }
      this.getChapterDetail()
    },
    methods: {
      submitForm() {
        this.$post(chapterCreateUrl, this.form).then(res => {
          this.form = {}
          this.openPrompt()
          setTimeout(() => {
            this.$router.go(-1)
          }, 300) // 延迟1秒执行
        })
      },
      updateForm(){
        this.$put(chapterUpdateUrl + this.getChapterId + '/', this.form).then(res=>{
          this.form = {}
          this.$message({
            message: '更新成功',
            type: 'success'
          });
          setTimeout(() => {
            this.$router.go(-1)
          }, 300)
        })
      },
      getChapterDetail(){
        this.$get(chapterDetailUrl + this.getChapterId + '/', this.form).then(res=>{
          console.log('章节详情', res.data);
          this.form = {
            title: res.data.data.title,
            is_free: res.data.data.is_free,
            content: res.data.data.content,
            novel: res.data.data.novel,
          }
        })
      },
      openPrompt() {
        this.$message({
          message: '添加成功',
          type: 'success'
        });
      }
    }
  }
</script>

<style lang="scss">
</style>
